@use "sass:math";
// Color variables
$primary-color: #1e80ff;
$primary-light: #e8f3ff;
$primary-dark: #0e5cdb;
$success-color: #28c165;
$warning-color: #ffb800;
$error-color: #f64c4c;
$info-color: #86909c;

// Neutral colors
$bg-color: #f4f5f5;
$border-color: #e4e6eb;
$text-primary: #252933;
$text-regular: #515767;
$text-secondary: #8a919f;
$text-placeholder: #a7b0bc;

// Spacing
$spacing-base: 8px;
$spacing-xs:  calc($spacing-base / 2);  // 4px
$spacing-sm: $spacing-base;      // 8px
$spacing-md: calc($spacing-base * 2);  // 16px
$spacing-lg: calc($spacing-base * 3);  // 24px
$spacing-xl: calc($spacing-base * 4);  // 32px

// Breakpoints
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

// Layout
$header-height: 60px;
$container-width: 1600px;
$sidebar-width: 240px;
$right-sidebar-width: 300px;

// Border radius
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;

// Shadow
$box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
$box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

// Z-index
$z-index-header: 100;
$z-index-modal: 1000;
